<template>
    <!-- 班级管理添加 -->
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item>
                    <em class="el-icon-lx-calendar"></em>班级管理
                </el-breadcrumb-item>
                <el-breadcrumb-item>添加班级</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div class="form-box">
                <div class="form-position">
                    <el-form :rules="rules" ref="form" :model="form" label-width="80px">
                        <el-form-item label="班级名称" prop="name">
                            <el-input 
                                style="width: 400px"
                                placeholder="例：20-10"
                                v-model="form.name"
                                maxlength="5"
                                show-word-limit
                                clearable>
                            </el-input>
                        </el-form-item>

                        <el-form-item label="开班日期" prop="begindate">
                            <el-col :span="11">
                                <el-date-picker
                                    type="date"
                                    placeholder="选择日期"
                                    v-model="form.begindate"
                                    value-format="yyyy-MM-dd"
                                    style="width: 100%;"
                                    @change="datechange"
                                ></el-date-picker>
                            </el-col>
                        </el-form-item>

                        <el-form-item label="主学课程"  prop="course">
                            <el-radio-group v-model="form.course">
                                <el-radio label="java"></el-radio>
                                <el-radio label="前端"></el-radio>
                                <el-radio label="python"></el-radio>
                                <el-radio label="UI设计"></el-radio>
                            </el-radio-group>
                        </el-form-item>

                        <el-form-item label="班级别名" prop="classname">
                            <el-select v-model="form.classname" placeholder="请选择" change="xxx()">
                                <div v-for="(item,index) in classnamelist" :key="index">
                                    <el-option :key="item.value" :label="item.value" :value="item.value"></el-option>
                                </div>
                            </el-select>
                        </el-form-item>

                        <el-form-item label="班主任" prop="headmaster">
                            <el-select v-model="form.headmaster" placeholder="请选择">
                                <div v-for="(item,index) in headmasterlist" :key="index">
                                    <el-option :key="item.value" :label="item.value" :value="item.value"></el-option>
                                </div>
                            </el-select>
                        </el-form-item>

                        <el-form-item label="课程时长" prop="duration">
                            <el-select v-model="form.duration" placeholder="请选择" @change="datechange">
                                <div v-for="(item,index) in durationlist" :key="index">
                                    <el-option :key="item.value" :label="item.label" :value="item.value"></el-option>
                                </div>
                            </el-select>
                        </el-form-item>
                        
                        <el-form-item label="班级状态" prop="status">
                            <el-radio-group v-model="form.status" size="small">
                                <el-radio-button label="-1">试听</el-radio-button>
                                <el-radio-button label="0">在读</el-radio-button>
                                <el-radio-button disabled label="1">毕业</el-radio-button>
                            </el-radio-group>
                        </el-form-item>

                        <el-form-item label="毕业日期" prop="enddate">
                            <el-col :span="11">
                                <el-date-picker
                                    type="date"
                                    v-model="form.enddate"
                                    value-format="yyyy-MM-dd"
                                    style="width: 100%;"
                                    :disabled="true"
                                ></el-date-picker>
                            </el-col>
                        </el-form-item>

                        
                        <el-form-item>
                            <el-button type="primary" @click="onSubmit('form')">添加班级</el-button>
                            <el-button @click="resetForm('form')">重置</el-button>
                        </el-form-item>
                    </el-form>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { allHeadmaster,addClass } from '../../api/index';
export default {
    name: "addclass",
    mounted: function () {
        // 获取所有班主任列表
        this.getAllHeadMaster()
    },
    data() {
        var validateName = (rule, value, callback) => {
            if (value === '') {
                callback(new Error('请输入班级名'));
            } else if (value.length != 5) {
                callback(new Error('班级名长度要5位'))
            } else{
                callback();
            }
        }
        return {
            form: {
                name: "",   //班级名称
                course: "", //课程名
                classname: "",  //班级别名
                enddate: "",    //毕业时间
                status: "", //状态
                begindate: "", //开班时间
                headmaster: "",  //班主任
                duration: "",   //课程时长
            },
            rules: {
                name: [
                    { required: true, validator: validateName, trigger: 'blur' },
                    { pattern: /^\d{2}-\d{2}$/, message: '班级名不合法，例：20-10' }
                ],
                begindate: [
                    { required: true, message: '请选择开班日期', trigger: 'blur' }
                ],
                course: [
                    { required: true, message: '请选择主修课程', trigger: 'blur' }
                ],
                classname: [
                    { required: true, message: '请选择班级别名', trigger: 'blur' }
                ],
                headmaster: [
                    { required: true, message: '请选择班主任', trigger: 'blur' }
                ],
                duration: [
                    { required: true, message: '请选择课程时长', trigger: 'blur' }
                ],
                status: [
                    { required: true, message: '请选择班级状态', trigger: 'blur' }
                ],
                enddate: [
                    { required: true, message: '请选择毕业时间', trigger: 'blur' }
                ],
            },
            classnamelist: [
                {
                    value: "王者班"
                },
                {
                    value: "荣耀班"
                },
                {
                    value: "英雄班"
                },
                {
                    value: "联盟班"
                }
            ],
            headmasterlist: [],
            durationlist: [
                {
                    label: "4个月",
                    value: "4"
                },
                {
                    label: "5个月",
                    value: "5"
                },
                {
                    label: "6个月",
                    value: "6"
                }
            ],
        }
    },
    methods: {
        getAllHeadMaster() {
            allHeadmaster().then(res => {
                console.log(res)
                this.headmasterlist = []
                for (let i = 0; i < res.length; i++) {
                    this.headmasterlist.push({value:res[i]})
                }
            })
        },
        addclass(callback) {
            addClass(this.form).then(res => {
                console.log(res)
                if (res == '添加成功') {
                    this.$message.success('添加成功！')
                    callback(true)
                    return
                } else if (res == '添加失败'){
                    this.$message.error('添加失败！')
                    callback(false)
                    return
                } else if (res == '当前班级未毕业'){
                    this.$message.error('当前班级未毕业！')
                    callback(false)
                    return
                }
                this.$message.error('添加失败！')
                callback(false)
                return
            })
        },
        // 计算毕业时间
        datechange() {
            // 判断开班日期和课程时长是否存在
            if (this.form.begindate == ""  || this.form.duration == "") {
                return
            } else {
                var beg_date = new Date(this.form.begindate)
                beg_date.setTime(beg_date.getTime() + 3600 * 1000 * 24 * 31 * this.form.duration)
                this.form.enddate = beg_date.getFullYear() + "-" + (beg_date.getMonth() + 1) + "-" + beg_date.getDate()
                console.log(this.form.enddate)
            }
        },
        onSubmit(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.addclass(status => {
                        this.$refs[formName].resetFields();
                    })
                } else {
                    this.$message.error('请输入正确数据！');
                    return false;
                }
            });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        }
    }
}
</script>

<style scoped>
.form-box{
    height: 450px;
}
.form-position{
    width: 500px;
    position: absolute;
    left: 50%;
    transform: translateX(-60%);
}
</style>